<template>
  <PageContainer>
    <view class="container">
      <Header title="代签到" />
      <view class="px-16 py-12">
        <view class="fz-14 default-color mb-8">
          <text>签到方式</text>
        </view>
        <view class="disFlxAC button-set">
          <view
            class="button-set__item br-8 fz-16"
            :class="{ 'button-set__item--active': !signMethod }"
            @click="handleSignMethod"
          >
            <text>本人已到现场签到</text>
          </view>
          <view
            class="button-set__item br-8 fz-16"
            :class="{ 'button-set__item--active': signMethod }"
            @click="handleSignMethod"
          >
            <text>其他人代参加活动</text>
          </view>
        </view>
      </view>
      <BasicsForm v-if="signMethod" @register="register" />
      <view class="px-16 py-12">
        <view class="fz-14 default-color mb-8">
          <text>是否需要打印胸卡</text>
        </view>
        <view class="disFlxAC button-set">
          <view
            class="button-set__item br-8 fz-16"
            :class="{ 'button-set__item--active': !isPrint }"
            @click="handleIsPrint"
          >
            <text>不打印</text>
          </view>
          <view
            class="button-set__item br-8 fz-16"
            :class="{ 'button-set__item--active': isPrint }"
            @click="handleIsPrint"
          >
            <text>打印</text>
          </view>
        </view>
      </view>
      <view v-if="isPrint" class="px-16 py-12">
        <view class="fz-14 default-color mb-8">
          <text>选择打印机</text>
        </view>
        <view
          class="px-16 py-12 disFlxJS default-color br-4"
          style="background-color: #f2f3f5"
          @click="handleShowPrinterPopup"
        >
          <text class="fz-14">{{ printerNoRef || '请选择打印机' }}</text>
          <text class="ali-icon fz-16">&#xe67b;</text>
        </view>
      </view>
    </view>
  </PageContainer>

  <TButtonGroup>
    <TButton class="gutter-btn" text="确认签到" type="primary" @click="handleSubmit" />
  </TButtonGroup>

  <SelectPrinter
    v-if="routeOptions?.activityId"
    v-model="printerNoRef"
    :is-init-api="true"
    ref="selectPrinterRef"
    :is-print="false"
    :activity-id="routeOptions.activityId"
  />
</template>

<script lang="ts" setup>
  /* signedOnBehalfOf 代签到 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { navigateBack, onLoad } from '@/router';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm } from '@/components/Form';
  import SelectPrinter, { type SelectPrinterRef } from '../../../components/SelectPrinter.vue';
  import { ref } from 'vue';
  import type { SignedOnBehalfOf } from '@/router/types/modules';
  import { Toast } from '@/utils';
  import { activityReplaceSign } from '@/api/activity';
  import { SignTypeEnum } from '@/enums/activityStatusEnum';

  /** 路由参数 */
  const routeOptions = ref<SignedOnBehalfOf>();
  onLoad<'signedOnBehalfOf'>((op) => {
    routeOptions.value = op;
  });

  /** 签到方式 */
  const signMethod = ref(false);
  function handleSignMethod() {
    signMethod.value = !signMethod.value;
  }

  /** 是否打印 */
  const isPrint = ref(false);
  function handleIsPrint() {
    isPrint.value = !isPrint.value;
  }

  const selectPrinterRef = ref<SelectPrinterRef>();
  function handleShowPrinterPopup() {
    selectPrinterRef.value?.show();
  }

  const printerNoRef = ref<string>();

  const [register, { submit, getFieldsValue }] = useForm({
    labelAlign: 'left',
    labelPosition: 'top',
    validateTrigger: 'bind',
    labelWidth: 'auto',
    schemas: [
      {
        field: 'basicInfo',
        label: '基本信息',
        component: 'Divider',
      },
      {
        field: 'replaceSignPersonName',
        label: '代签人',
        component: 'Input',
        componentProps: {
          placeholder: '请输入代参与人姓名',
          maxlength: 12,
        },
      },
      {
        field: 'replaceSignPersonPhone',
        label: '手机号码',
        component: 'InputPhone',
        componentProps: {
          placeholder: '请输入代参与人手机号',
        },
      },
      {
        field: 'replaceSignCompanyName',
        label: '单位名称',
        component: 'Input',
        componentProps: {
          placeholder: '请输入任职的单位',
        },
      },
      {
        field: 'replaceSignCompanyPosition',
        label: '单位职务',
        component: 'Input',
        componentProps: {
          placeholder: '请输入任职的单位职务',
        },
      },
    ],
  });

  async function handleSubmit() {
    let formVals: Recordable = {};
    if (signMethod.value) {
      await submit();
      formVals = getFieldsValue();
    }

    if (isPrint.value && !printerNoRef.value) return Toast('请选择打印机');

    activityReplaceSign({
      id: routeOptions.value?.registerId!,
      activityId: routeOptions.value?.activityId!,
      signType: signMethod.value ? SignTypeEnum.OTHERS_SIGN_IN : SignTypeEnum.SELF_SIGN_IN,
      equipmentNumber: printerNoRef.value,
      isPrint: isPrint.value ? 1 : 0,
      ...formVals,
    }).then(() => {
      routeOptions.value?.success?.();
      Toast({
        title: '签到成功',
        success: () => navigateBack(),
      });
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
    .button-set {
      gap: 32rpx;
      &__item {
        flex: 1;
        background-color: #f2f3f5;
        color: #969799;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        transition: all 0.3s;
      }
      &__item--active {
        background-color: #2878ff;
        color: #fff;
      }
    }
  }
</style>
